<template>
  <div class="coupon-history">
    <div class="item" v-for="(item, index) in list" :key="index">
      <div class="info-box">
        <div class="left">
          <img mode="scaleToFill" :src="item.merchant.logo" class="img-size-100" />
        </div>
        <div class="center">
          <div class="title">{{item.merchant.name}}</div>
          <div class="lb">第{{item.number}}次使用</div>
          <div class="time">{{item.created_at}}</div>
        </div>
        <div class="right">
          <div class="num">{{item.people_number}}</div>
          <div>入园人数</div>
        </div>
      </div>
    </div>
    <base-empty v-if="total == 0" />
    <uni-load-more
      :status="status"
      :icon-size="12"
      :content-text="contentText"
      v-if="total > 10"
    />
  </div>
</template>
<script>
import uniLoadMore from "@dcloudio/uni-ui/lib/uni-load-more/uni-load-more.vue";
export default {
  components: { uniLoadMore },
  data() {
    return {
      cardNo: "",
      list: [],
      currentPage: 0,
      total: 10,
      pageSize: 15,
      status: "more",
      contentText: {
        contentdown: "上拉加载更多",
        contentrefresh: "加载中...",
        contentnomore: "没有更多了",
      },
    };
  },
  onLoad(options) {
    this.cardNo = options.id;
    this.getcardRecords();
  },
  onReachBottom() {
    this.getcardRecords();
  },
  methods: {
    getcardRecords() {
      if (this.currentPage >= Math.ceil(this.total / this.pageSize)) {
        this.status = "noMore";
        return;
      }
      this.status = "loading";
      this.$api
        .getcardRecords({
          card_no: this.cardNo,
          pageSize: this.pageSize,
          page: this.currentPage + 1,
        })
        .then((res) => {
          if (res.code == 200) {
            this.total = res.data.total;
            this.currentPage++;
            this.list = this.list.concat(res.data.data);
          }
        });
    },
  },
};
</script>
<style lang="scss">
.coupon-history {
  padding: 30rpx;
  box-sizing: border-box;
  border-top: 1rpx solid #e7e7e7;
  .item {
    padding: 24rpx 0;
    border-bottom: 1rpx solid #e7e7e7;
    .info-box {
      display: flex;
      .left {
        flex: 0 0 84rpx;
        height: 82rpx;
        border-radius: 4rpx;
        overflow: hidden;
      }
      .center {
        flex: 1;
        color: #fff;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 20rpx;
        .title {
          color: #333;
          font-size: 32rpx;
          font-weight: 500;
        }
        .lb {
          display: inline-block;
          font-size: 24rpx;
          color: #1772ff;
          border: 1rpx solid #1772ff;
          border-radius: 8rpx;
          padding: 0 10rpx;
          line-height: 36rpx;
        }
        .time {
          font-size: 26rpx;
          color: #666;
          margin-top: 20rpx;
        }
      }
      .right {
        display: flex;
        flex-direction: column;
        text-align: center;
        flex: 0 0 110rpx;
        font-size: 26rpx;
        color: #666666;
        .num {
          color: #1772ff;
          margin-bottom: 10rpx;
          font-size: 32rpx;
        }
      }
    }
  }
}
</style>
